<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>东方奇遇传 - 开发文档</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-tomorrow.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
    <style>
        :root {
            --primary-color: #3eaf7c;
            --text-color: #2c3e50;
            --border-color: #eaecef;
            --code-bg-color: #282c34;
            --sidebar-width: 300px;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            color: var(--text-color);
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }

        .banner {
            background: linear-gradient(45deg, #3eaf7c, #42b983);
            color: white;
            padding: 4rem 2rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,...') center/cover;
            opacity: 0.1;
        }

        .banner h1 {
            font-size: 3rem;
            margin: 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }

        .banner p {
            font-size: 1.2rem;
            margin: 1rem 0 0;
            opacity: 0.9;
        }

        .container {
            display: flex;
            max-width: 1400px;
            margin: 0 auto;
            min-height: calc(100vh - 200px);
        }

        .sidebar {
            width: var(--sidebar-width);
            border-right: 1px solid var(--border-color);
            padding: 2rem;
            position: sticky;
            top: 0;
            height: 100vh;
            overflow-y: auto;
            background: #f8f9fa;
        }

        .content {
            flex: 1;
            padding: 2rem 3rem;
            max-width: 900px;
        }

        .nav-section {
            margin-bottom: 2rem;
        }

        .nav-section-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 1rem;
        }

        .nav-link {
            display: block;
            padding: 0.5rem 1rem;
            color: var(--text-color);
            text-decoration: none;
            transition: all 0.3s ease;
            border-radius: 4px;
            margin-bottom: 0.3rem;
        }

        .nav-link:hover {
            background: rgba(62, 175, 124, 0.1);
            color: var(--primary-color);
        }

        .section {
            margin-bottom: 4rem;
        }

        .section h2 {
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 0.5rem;
            margin-bottom: 2rem;
        }

        .code-generator {
            background: #fff;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 1.5rem;
            margin: 1rem 0;
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

        .form-group input, .form-group select {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .generate-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .generate-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(62, 175, 124, 0.4);
        }

        .code-output {
            margin-top: 1rem;
            position: relative;
        }

        .copy-btn {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: #fff;
            padding: 0.3rem 0.6rem;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9rem;
        }

        .copy-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }
    </style>
</head>
<body>
    <div class="banner">
        <h1>东方奇遇传</h1>
        <p>开发文档 & 二次开发指南</p>
    </div>
    
    <div class="container">
        <div class="sidebar">
            <div class="nav-section">
                <div class="nav-section-title">系统文档</div>
                <a href="#overview" class="nav-link">项目概述</a>
                <a href="#architecture" class="nav-link">系统架构</a>
                <a href="#save-system" class="nav-link">存档系统</a>
            </div>
            
            <div class="nav-section">
                <div class="nav-section-title">界面组件</div>
                <a href="#modal-system" class="nav-link">模态框系统</a>
                <a href="#shop-system" class="nav-link">商店系统</a>
                <a href="#inventory-system" class="nav-link">背包系统</a>
                <a href="#notification-system" class="nav-link">通知系统</a>
            </div>
            
            <div class="nav-section">
                <div class="nav-section-title">代码生成器</div>
                <a href="#character-generator" class="nav-link">角色生成器</a>
                <a href="#skill-generator" class="nav-link">技能生成器</a>
                <a href="#item-generator" class="nav-link">道具生成器</a>
            </div>
            
            <div class="nav-section">
                <div class="nav-section-title">源码解析</div>
                <a href="#character-impl" class="nav-link">角色实现</a>
                <a href="#skill-impl" class="nav-link">技能实现</a>
                <a href="#map-impl" class="nav-link">地图实现</a>
                <a href="#level-system" class="nav-link">关卡系统</a>
            </div>
            
            <div class="nav-section">
                <div class="nav-section-title">API 参考</div>
                <a href="#modal-api" class="nav-link">模态框 API</a>
                <a href="#notification-api" class="nav-link">通知 API</a>
                <a href="#shop-api" class="nav-link">商店 API</a>
                <a href="#character-api" class="nav-link">角色 API</a>
                <a href="#skill-api" class="nav-link">技能 API</a>
                <a href="#level-api" class="nav-link">关卡 API</a>
                <a href="#save-api" class="nav-link">存档 API</a>
            </div>
        </div>

        <div class="content">
            <section id="overview" class="section">
                <h2>项目概述</h2>
                <p>东方奇遇传是一个基于回合制战斗的角色扮演游戏。游戏采用模块化设计，支持自定义角色、技能和道具。</p>
                
                <h3>核心特性</h3>
                <ul>
                    <li>模块化的角色系统</li>
                    <li>可扩展的技能系统</li>
                    <li>自定义道具系统</li>
                    <li>存档系统</li>
                    <li>地图生成系统</li>
                </ul>
            </section>

            <section id="getting-started" class="section">
                <h2>开始使用</h2>
                <h3>项目结构</h3>
                <pre><code class="language-plaintext">
project/
├── scripts/
│   ├── character/         # 角色系统
│   ├── skiller/          # 技能系统
│   ├── items/            # 道具系统
│   ├── level/            # 关卡系统
│   └── components/       # 通用组件
├── styles/               # 样式文件
└── resource/            # 资源文件
    └── characters/      # 角色资源
</code></pre>

                <h3>快速开始</h3>
                <pre><code class="language-javascript">
// 1. 创建角色
const character = characterManager.createCharacter('reimu');

// 2. 开始游戏
startLevel(character, 1, 1);
</code></pre>
            </section>

            <section id="character-system" class="section">
                <h2>角色系统</h2>
                <p>角色系统基于 CharacterTemplate 类实现，支持自定义属性、技能和特性。</p>

                <h3>角色配置</h3>
                <pre><code class="language-javascript">
// 在 characters.js 中定义角色
const CharacterConfigs = {
    reimu: {
        name: "博丽灵梦",
        stats: {
            maxHp: 100,
            attack: 15,
            defense: 10,
            speed: 12
        },
        trait: {
            name: "御币",
            description: "每回合恢复5%生命值"
        }
    }
};

// 注册角色
InitialCharacters.push('reimu');
</code></pre>

                <h3>角色图片配置</h3>
                <pre><code class="language-javascript">
// 在 touhou_character.js 中配置图片
const CharacterImages = {
    reimu: {
        card: 'resource/characters/reimu/card.png',
        full: 'resource/characters/reimu/full.png'
    }
};
</code></pre>
            </section>

            <section id="skill-system" class="section">
                <h2>技能系统</h2>
                <p>技能系统支持多种类型的技能效果，包括攻击、治疗、增益和减益效果。</p>

                <h3>技能类型</h3>
                <pre><code class="language-javascript">
const SkillType = {
    ATTACK: 'attack',     // 攻击技能
    HEAL: 'heal',         // 治疗技能
    BUFF: 'buff',         // 增益效果
    DEBUFF: 'debuff'      // 减益效果
};
</code></pre>

                <h3>创建新技能</h3>
                <pre><code class="language-javascript">
// 在 skill_template.js 中创建技能
class CustomSkill extends Skill {
    constructor() {
        super({
            id: 'custom_skill',
            name: '技能名称',
            type: SkillType.ATTACK,
            cost: 30
        });
    }

    execute(source, target) {
        // 实现技能效果
        const damage = source.attack * 1.5;
        target.takeDamage(damage);
        return `${source.name} 对 ${target.name} 造成了 ${damage} 点伤害`;
    }
}
</code></pre>

                <h3>注册技能</h3>
                <pre><code class="language-javascript">
// 在 skill_dispatch.js 中注册
SkillDispatch.register('custom_skill', CustomSkill);
</code></pre>
            </section>

            <section id="item-system" class="section">
                <h2>道具系统</h2>
                <p>道具系统支持消耗品和装备两种类型，可以自定义使用效果。</p>

                <h3>道具类型</h3>
                <pre><code class="language-javascript">
const ItemType = {
    CONSUMABLE: 'consumable',  // 消耗品
    EQUIPMENT: 'equipment'     // 装备
};
</code></pre>

                <h3>创建新道具</h3>
                <pre><code class="language-javascript">
// 在 item_template.js 中创建道具
class HealingPotion extends Item {
    constructor() {
        super(
            'healing_potion',
            '治疗药水',
            '恢复30%生命值',
            100,
            ItemType.CONSUMABLE
        );
    }

    use(character) {
        const healAmount = Math.floor(character.maxHp * 0.3);
        character.heal(healAmount);
        return `恢复了 ${healAmount} 点生命值`;
    }
}
</code></pre>
            </section>

            <section id="save-system" class="section">
                <h2>存档系统</h2>
                <p>存档系统使用 LocalStorage 存储游戏状态，支持以下功能：</p>
                <ul>
                    <li>角色状态保存（属性、技能和道具等）</li>
                    <li>地图状态保存（位置、缩放等）</li>
                    <li>游戏进度保存</li>
                </ul>

                <h3>使用方法</h3>
                <pre><code class="language-javascript">
// 保存游戏
SaveSystem.save({
    character: character,
    world: currentWorld,
    level: currentLevel,
    currentNode: currentNode,
    mapView: mapView
});

// 读取存档
const saveData = SaveSystem.load();
if (saveData) {
    startLevel(
        saveData.character,
        saveData.world,
        saveData.level,
        saveData
    );
}
</code></pre>

                <h3>存档数据结构</h3>
                <pre><code class="language-javascript">
{
    timestamp: number,      // 存档时间戳
    character: {
        id: string,        // 角色ID
        name: string,      // 角色名称
        hp: number,        // 当前生命值
        maxHp: number,     // 最大生命值
        gold: number,      // 金币
        inventory: Item[], // 背包物品
        level: number,     // 等级
        exp: number,       // 经验值
        stats: {          // 角色属性
            attack: number,
            defense: number,
            speed: number
        },
        buffs: Map,       // 状态效果
        skills: Set       // 技能列表
    },
    world: number,        // 当前世界
    level: number,        // 当前关卡
    currentNode: {        // 当前节点
        type: string,
        x: number,
        y: number,
        content: object,
        children: array
    },
    mapState: {          // 地图状态
        scale: number,
        offsetX: number,
        offsetY: number
    }
}
</code></pre>
            </section>

            <section id="character-generator" class="section">
                <h2>角色生成器</h2>
                <div class="code-generator">
                    <div class="form-group">
                        <label>角色ID</label>
                        <input type="text" id="charId" placeholder="例：marisa">
                    </div>
                    <div class="form-group">
                        <label>角色名称</label>
                        <input type="text" id="charName" placeholder="例：雾雨魔理沙">
                    </div>
                    <div class="form-group">
                        <label>生命值</label>
                        <input type="number" id="charHp" value="100">
                    </div>
                    <div class="form-group">
                        <label>攻击力</label>
                        <input type="number" id="charAtk" value="15">
                    </div>
                    <div class="form-group">
                        <label>防御力</label>
                        <input type="number" id="charDef" value="10">
                    </div>
                    <div class="form-group">
                        <label>速度</label>
                        <input type="number" id="charSpd" value="12">
                    </div>
                    <button class="generate-btn" onclick="generateCharacterCode()">生成代码</button>
                    
                    <div class="code-output">
                        <button class="copy-btn">复制</button>
                        <pre><code class="language-javascript" id="characterCode"></code></pre>
                    </div>
                </div>
            </section>

            <section id="skill-generator" class="section">
                <h2>技能生成器</h2>
                <div class="code-generator">
                    <div class="form-group">
                        <label>技能ID</label>
                        <input type="text" id="skillId" placeholder="例：master_spark">
                    </div>
                    <div class="form-group">
                        <label>技能名称</label>
                        <input type="text" id="skillName" placeholder="例：主人公光束">
                    </div>
                    <div class="form-group">
                        <label>技能类型</label>
                        <select id="skillType">
                            <option value="ATTACK">攻击</option>
                            <option value="HEAL">治疗</option>
                            <option value="BUFF">增益</option>
                            <option value="DEBUFF">减益</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>技能消耗</label>
                        <input type="number" id="skillCost" value="30">
                    </div>
                    <button class="generate-btn" onclick="generateSkillCode()">生成代码</button>
                    
                    <div class="code-output">
                        <button class="copy-btn">复制</button>
                        <pre><code class="language-javascript" id="skillCode"></code></pre>
                    </div>
                </div>
            </section>

            <section id="item-generator" class="section">
                <h2>道具生成器</h2>
                <div class="code-generator">
                    <div class="form-group">
                        <label>道具ID</label>
                        <input type="text" id="itemId" placeholder="例：healing_potion">
                    </div>
                    <div class="form-group">
                        <label>道具名称</label>
                        <input type="text" id="itemName" placeholder="例：治疗药水">
                    </div>
                    <div class="form-group">
                        <label>道具描述</label>
                        <input type="text" id="itemDesc" placeholder="例：恢复30%生命值">
                    </div>
                    <div class="form-group">
                        <label>价格</label>
                        <input type="number" id="itemPrice" value="100">
                    </div>
                    <div class="form-group">
                        <label>道具类型</label>
                        <select id="itemType">
                            <option value="CONSUMABLE">消耗品</option>
                            <option value="EQUIPMENT">装备</option>
                        </select>
                    </div>
                    <button class="generate-btn" onclick="generateItemCode()">生成代码</button>
                    
                    <div class="code-output">
                        <button class="copy-btn">复制</button>
                        <pre><code class="language-javascript" id="itemCode"></code></pre>
                    </div>
                </div>
            </section>

            <section id="level-system" class="section">
                <h2>关卡系统</h2>
                <p>关卡系统支持自定义地图生成规则、节点类型和难度设置。</p>

                <h3>关卡配置</h3>
                <pre><code class="language-javascript">
// 在 level_config.js 中设置
const LevelDifficulty = {
    EASY: {
        name: '简单',
        depth: 5,          // 地图深度
        width: 3,          // 每层节点数
        enemyLevel: 1,     // 敌人等级
        rewardMultiplier: 1 // 奖励倍率
    },
    NORMAL: {
        name: '普通',
        depth: 7,
        width: 4,
        enemyLevel: 2,
        rewardMultiplier: 1.5
    },
    HARD: {
        name: '困难',
        depth: 8,
        width: 5,
        enemyLevel: 3,
        rewardMultiplier: 2
    }
};

// 节点类型配置
const NodeTypes = {
    START: 'start',      // 起始节点
    BATTLE: 'battle',    // 战斗节点
    SHOP: 'shop',       // 商店节点
    EVENT: 'event',     // 事件节点
    BOSS: 'boss',       // BOSS节点
    ENCOUNTER: 'encounter' // 奇遇节点
};</code></pre>

                <h3>创建关卡</h3>
                <pre><code class="language-javascript">
// 创建地图生成器
const generator = new LevelMapGenerator(LevelDifficulty.NORMAL);

// 生成地图
const levelMap = generator.generateMap();

// 自定义节点分布
generator.setNodeDistribution({
    battle: 0.4,     // 40% 战斗节点
    shop: 0.2,      // 20% 商店节点
    event: 0.2,     // 20% 事件节点
    encounter: 0.2  // 20% 奇遇节点
});

// 设置特定节点的节点类型
generator.setLayerNodes(3, [
    { type: 'shop', weight: 1 },
    { type: 'event', weight: 1 }
]);</code></pre>

                <h3>自定义节点内容</h3>
                <pre><code class="language-javascript">
// 在 level_config.js 中添加自定义节点内容
const NodeContents = {
    battle: [
        {
            name: "妖精群",
            enemies: ["小妖精", "冰妖精", "火妖精"],
            difficulty: 1
        },
        {
            name: "式神之战",
            enemies: ["狐狸式神", "猫又式神"],
            difficulty: 2
        }
    ],
    event: [
        {
            name: "神祭典",
            description: "正在举行祭典...",
            choices: ["参加祭典", "默默离开"],
            outcomes: [
                { type: "reward", gold: 100, hp: 20 },
                { type: "nothing" }
            ]
        }
    ],
    shop: [
        {
            name: "小店",
            items: ["治疗药水", "力量药水", "防御符咒"],
            priceMultiplier: 1
        }
    ]
};</code></pre>

                <h3>关卡生成器配置</h3>
                <div class="code-generator">
                    <div class="form-group">
                        <label>关卡深度</label>
                        <input type="number" id="levelDepth" value="5">
                    </div>
                    <div class="form-group">
                        <label>每层宽度</label>
                        <input type="number" id="levelWidth" value="3">
                    </div>
                    <div class="form-group">
                        <label>难度等级</label>
                        <select id="levelDifficulty">
                            <option value="EASY">简单</option>
                            <option value="NORMAL">普通</option>
                            <option value="HARD">���难</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>节点分布</label>
                        <div class="distribution-inputs">
                            <input type="number" id="battleRate" placeholder="战斗比例" value="0.4">
                            <input type="number" id="shopRate" placeholder="商店比例" value="0.2">
                            <input type="number" id="eventRate" placeholder="事件比例" value="0.2">
                            <input type="number" id="encounterRate" placeholder="奇遇比例" value="0.2">
                        </div>
                    </div>
                    <button class="generate-btn" onclick="generateLevelCode()">生成代码</button>
                    
                    <div class="code-output">
                        <button class="copy-btn">复制</button>
                        <pre><code class="language-javascript" id="levelCode"></code></pre>
                    </div>
                </div>
            </section>

            <section id="level-unlock" class="section">
                <h2>关卡解锁系统</h2>
                <p>关卡解锁系统控制玩家可访问的关卡。</p>

                <h3>关卡配置</h3>
                <pre><code class="language-javascript">
// 在 level_config.js 中配置关卡
const LevelConfigs = {
    '1-1': {
        id: '1-1',
        name: '雾之湖',
        difficulty: LevelDifficulty.EASY,
        unlockConditions: [], // 无条件解锁
        rewards: {
            gold: 100,
            items: ['healing_potion'],
            unlocks: ['1-2'] // 完成后解锁的关卡
        }
    },
    '1-2': {
        id: '1-2',
        name: '妖怪之山',
        difficulty: LevelDifficulty.NORMAL,
        unlockConditions: ['1-1'], // 需要完成 1-1
        rewards: {
            gold: 200,
            items: ['strength_potion'],
            unlocks: ['1-3', '2-1']
        }
    }
};</code></pre>

                <h3>解锁系统实现</h3>
                <pre><code class="language-javascript">
// level_manager.js
class LevelManager {
    static unlockedLevels = new Set(['1-1']); // 初始解锁

    // 检查关卡是否解锁
    static isLevelUnlocked(levelId) {
        return this.unlockedLevels.has(levelId);
    }

    // 解锁新关卡
    static unlockLevel(levelId) {
        this.unlockedLevels.add(levelId);
        // 触发关卡解锁事件
        this.onLevelUnlock?.(levelId);
    }

    // 完成关卡
    static completeLevel(levelId) {
        const config = LevelConfigs[levelId];
        if (config?.rewards?.unlocks) {
            config.rewards.unlocks.forEach(id => this.unlockLevel(id));
        }
    }
}</code></pre>

                <h3>使用示例</h3>
                <pre><code class="language-javascript">
// 检查关卡是否解锁
if (LevelManager.isLevelUnlocked('1-2')) {
    // 显示关卡
    showLevel('1-2');
}

// 完成关卡时
LevelManager.completeLevel('1-1');
// 会自动解锁 1-2</code></pre>
            </section>

            <section id="api-reference" class="section">
                <h2>API 参考</h2>
                
                <h3>LevelMapGenerator 类</h3>
                <div class="api-doc">
                    <h4>构造函数</h4>
                    <pre><code class="language-javascript">constructor(difficulty: LevelDifficulty)</code></pre>
                    <p>创建地图生成器实例。</p>
                    <p>推荐暴露：✅ 可以直接使用</p>

                    <h4>generateMap()</h4>
                    <pre><code class="language-javascript">generateMap(): MapNode</code></pre>
                    <p>生成关卡地图。</p>
                    <p>推荐暴露：✅ 可以直接使用</p>

                    <h4>setNodeDistribution()</h4>
                    <pre><code class="language-javascript">setNodeDistribution(distribution: NodeDistribution)</code></pre>
                    <p>设置节点类型分布。</p>
                    <p>推荐暴露：✅ 可以直接使用</p>
                </div>

                <h3>LevelMapView 类</h3>
                <div class="api-doc">
                    <h4>构造函数</h4>
                    <pre><code class="language-javascript">constructor(container: HTMLElement, character: Character)</code></pre>
                    <p>创建地图视图实例。</p>
                    <p>推荐暴露：❌ 仅供内部使用</p>

                    <h4>createMap()</h4>
                    <pre><code class="language-javascript">createMap(levelMap: MapNode)</code></pre>
                    <p>创建地图视图。</p>
                    <p>推荐暴露：❌ 仅供内部使用</p>
                </div>

                <h3>LevelManager 类</h3>
                <div class="api-doc">
                    <h4>isLevelUnlocked()</h4>
                    <pre><code class="language-javascript">static isLevelUnlocked(levelId: string): boolean</code></pre>
                    <p>检查关卡是否解锁。</p>
                    <p>推荐暴露：✅ 可以直接使用</p>

                    <h4>unlockLevel()</h4>
                    <pre><code class="language-javascript">static unlockLevel(levelId: string): void</code></pre>
                    <p>解锁指定关卡。</p>
                    <p>推荐暴露：❌ 仅供内部使用</p>

                    <h4>completeLevel()</h4>
                    <pre><code class="language-javascript">static completeLevel(levelId: string): void</code></pre>
                    <p>完成关卡并处理奖励。</p>
                    <p>推荐暴露：✅ 可以直接使用</p>
                </div>
            </section>

            <section id="modal-api" class="section">
                <h2>模态框 API</h2>
                <div class="api-doc">
                    <h3>ModalManager</h3>
                    
                    <h4>show()</h4>
                    <pre><code class="language-javascript">static show(content: string | Element, options?: ModalOptions): void</code></pre>
                    <p>显示模态框。</p>
                    <p>推荐暴露：✅ 可以直接使用</p>
                    <p>参数：</p>
                    <ul>
                        <li>content: 模态框内容或选择器</li>
                        <li>options: 配置选项</li>
                    </ul>

                    <h4>showMessage()</h4>
                    <pre><code class="language-javascript">static showMessage(options: MessageOptions): Promise<boolean></code></pre>
                    <p>显示消息对话框。</p>
                    <p>推荐暴露：✅ 可以直接使用</p>
                    <p>参数：</p>
                    <ul>
                        <li>title: 标题</li>
                        <li>message: 消息内容</li>
                        <li>confirmText: 确认按钮文本</li>
                        <li>cancelText: 取消按钮文本</li>
                        <li>showCancel: 是否显示取消按钮</li>
                    </ul>

                    <h4>hide()</h4>
                    <pre><code class="language-javascript">static hide(selector: string): void</code></pre>
                    <p>隐藏模态框。</p>
                    <p>推荐暴露：✅ 可以直接使用</p>
                </div>
            </section>

            <section id="notification-api" class="section">
                <h2>通知 API</h2>
                <div class="api-doc">
                    <h3>NotificationManager</h3>
                    
                    <h4>show()</h4>
                    <pre><code class="language-javascript">static show(message: string, type?: 'success' | 'error' | 'info' | 'warning'): void</code></pre>
                    <p>显示通知。</p>
                    <p>推荐暴露：✅ 可以直接使用</p>

                    <h4>快捷方法</h4>
                    <pre><code class="language-javascript">static success(message: string): void
static error(message: string): void
static info(message: string): void
static warning(message: string): void</code></pre>
                    <p>显示不同类型的通知。</p>
                    <p>推荐暴露：✅ 可以直接使用</p>
                </div>
            </section>

            <section id="shop-api" class="section">
                <h2>商店 API</h2>
                <div class="api-doc">
                    <h3>ShopView</h3>
                    
                    <h4>单例访问</h4>
                    <pre><code class="language-javascript">// 全局单例
+window.shopView
+
+// 或静态方法
+ShopView.show(character: Character, items?: Item[])</code></pre>
                    <p>访问商店实例或直接显示商店。</p>
                    <p>推荐暴露：✅ 可以直接使用</p>

                    <h4>show()</h4>
                    <pre><code class="language-javascript">show(character: Character, items?: Item[]): void</code></pre>
                    <p>显示商店。</p>
                    <p>推荐暴露：✅ 可以直接使用</p>
                    <p>示例：</p>
                    <pre><code class="language-javascript">// 使用单例
+shopView.show(character);
+
+// 或使用静态方法
+ShopView.show(character);</code></pre>
                </div>
            </section>

            <section id="character-api" class="section">
                <h2>角色 API</h2>
                <div class="api-doc">
                    <h3>CharacterManager</h3>
                    
                    <h4>createCharacter()</h4>
                    <pre><code class="language-javascript">static createCharacter(id: string): Character</code></pre>
                    <p>创建角色实例。</p>
                    <p>推荐暴露：✅ 可以直接使用</p>

                    <h4>Character 类方法</h4>
                    <pre><code class="language-javascript">takeDamage(amount: number): number
heal(amount: number): number
addBuff(id: string, effect: BuffEffect): void
removeBuff(id: string): void
addSkill(skill: Skill): void
removeSkill(skillId: string): void</code></pre>
                    <p>角色实例方法。</p>
                    <p>推荐暴露：✅ 可以直接使用</p>
                </div>
            </section>

            <section id="save-api" class="section">
                <h2>存档 API</h2>
                <div class="api-doc">
                    <h3>SaveSystem</h3>
                    
                    <h4>save()</h4>
                    <pre><code class="language-javascript">static save(gameState: GameState): void</code></pre>
                    <p>保存游戏状态。</p>
                    <p>推荐暴露：✅ 可以直接使用</p>

                    <h4>load()</h4>
                    <pre><code class="language-javascript">static load(): GameState | null</code></pre>
                    <p>加载游戏存档。</p>
                    <p>推荐暴露：✅ 可以直接使用</p>

                    <h4>formatDate()</h4>
                    <pre><code class="language-javascript">static formatDate(timestamp: number): string</code></pre>
                    <p>格式化存档时间。</p>
                    <p>推荐暴露：✅ 可以直接使用</p>
                </div>
            </section>

            <section id="effect-system" class="section">
                <h2>效果系统</h2>
                <p>效果系统提供了一个灵活的机制来修改角色属性和行为。</p>

                <h3>效果类型</h3>
                <ul>
                    <li>PASSIVE: 被动效果，持续生效</li>
                    <li>TRIGGER: 触发效果，在特定条件下触发</li>
                    <li>BUFF: 增益效果，通常有持续时间</li>
                    <li>DEBUFF: 减益效果，通常有持续时间</li>
                </ul>

                <h3>效果生成器</h3>
                <div class="code-generator">
                    <div class="form-group">
                        <label>效果ID</label>
                        <input type="text" id="effectId" placeholder="例：healing_boost">
                    </div>
                    <div class="form-group">
                        <label>效果名称</label>
                        <input type="text" id="effectName" placeholder="例：祥瑞">
                    </div>
                    <div class="form-group">
                        <label>效果描述</label>
                        <input type="text" id="effectDesc" placeholder="例：获得卡牌后回血能力+10%">
                    </div>
                    <div class="form-group">
                        <label>效果类型</label>
                        <select id="effectType">
                            <option value="PASSIVE">被动效果</option>
                            <option value="TRIGGER">触发效果</option>
                            <option value="BUFF">增益效果</option>
                            <option value="DEBUFF">减益效果</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>效果价格</label>
                        <input type="number" id="effectPrice" value="300">
                    </div>
                    <div class="form-group">
                        <label>持续时间</label>
                        <input type="number" id="effectDuration" value="-1" placeholder="-1表示永久">
                    </div>
                    <button class="generate-btn" onclick="generateEffectCode()">生成代码</button>
                    
                    <div class="code-output">
                        <button class="copy-btn">复制</button>
                        <pre><code class="language-javascript" id="effectCode"></code></pre>
                    </div>
                </div>

                <h3>示例效果</h3>
                <pre><code class="language-javascript">
// 回血增强效果
class HealingBoostEffect extends Effect {
    constructor(boost = 0.1) {
        super({
            id: 'healing_boost',
            name: '祥瑞',
            description: `获得卡牌后回血能力+${boost * 100}%`,
            type: EffectType.PASSIVE,
            price: 300
        });
        this.boost = boost;
    }

    apply(character) {
        const originalHeal = character.heal.bind(character);
        character.heal = function(amount) {
            return originalHeal(amount * (1 + this.boost));
        }.bind(this);
    }

    remove(character) {
        character.heal = character.constructor.prototype.heal;
    }
}

// 添加到效果池
EffectPool.NORMAL.push({
    effect: HealingBoostEffect,
    weight: 1
});</code></pre>

                <h3>添加到效果池</h3>
                <pre><code class="language-javascript">
// 在 effects/basic_effects.js 中添加
const EffectPool = {
    EASY: [
        {
            effect: CustomEffect,
            weight: 1  // 出现权重
        }
    ],
    NORMAL: [
        // 普通难度效果池
    ],
    HARD: [
        // 困难难度效果池
    ]
};</code></pre>
            </section>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-javascript.min.js"></script>
    <script>
        // 角色生成器
        function generateCharacterCode() {
            const id = document.getElementById('charId')?.value || 'custom_char';
            const name = document.getElementById('charName')?.value || '自定义角色';
            const hp = document.getElementById('charHp')?.value || 100;
            const atk = document.getElementById('charAtk')?.value || 15;
            const def = document.getElementById('charDef')?.value || 10;
            const spd = document.getElementById('charSpd')?.value || 12;
            
            const code = `// 在 characters.js 中添加
const CharacterConfigs = {
    ${id}: {
        name: "${name}",
        stats: {
            maxHp: ${hp},
            attack: ${atk},
            defense: ${def},
            speed: ${spd}
        },
        trait: {
            name: "特性名称",
            description: "特性描述"
        }
    }
};

// 注册角色
InitialCharacters.push('${id}');

// 在 touhou_character.js 中添加图片
const CharacterImages = {
    ${id}: {
        card: 'resource/characters/${id}/card.png',
        full: 'resource/characters/${id}/full.png'
    }
};`;

            const codeElement = document.getElementById('characterCode');
            if (codeElement) {
                codeElement.textContent = code;
                Prism.highlightElement(codeElement);
            }
        }

        // 技能生成器
        function generateSkillCode() {
            const id = document.getElementById('skillId')?.value || 'custom_skill';
            const name = document.getElementById('skillName')?.value || '自定义技能';
            const type = document.getElementById('skillType')?.value || 'ATTACK';
            const cost = document.getElementById('skillCost')?.value || 30;

            const code = `// 在 skill_template.js 中添加
class ${id.charAt(0).toUpperCase() + id.slice(1)}Skill extends Skill {
    constructor() {
        super({
            id: '${id}',
            name: '${name}',
            type: SkillType.${type},
            cost: ${cost}
        });
    }

    execute(source, target) {
        ${type === 'ATTACK' ? 
            `const damage = source.attack * 1.5;
        target.takeDamage(damage);
        return \`\${source.name} 对 \${target.name} 造成了 \${damage} 点伤害\`;` :
            type === 'HEAL' ? 
            `const healAmount = source.attack;
        target.heal(healAmount);
        return \`\${source.name} 为 \${target.name} 恢复了 \${healAmount} 点生命值\`;` :
            `// 实现自定义效果
        return \`\${source.name} 使用了 ${name}\`;`}
    }
}

// 在 skill_dispatch.js 中注册
SkillDispatch.register('${id}', ${id.charAt(0).toUpperCase() + id.slice(1)}Skill);`;

            const codeElement = document.getElementById('skillCode');
            if (codeElement) {
                codeElement.textContent = code;
                Prism.highlightElement(codeElement);
            }
        }

        // 道具生成器
        function generateItemCode() {
            const id = document.getElementById('itemId')?.value || 'custom_item';
            const name = document.getElementById('itemName')?.value || '自定义道具';
            const desc = document.getElementById('itemDesc')?.value || '这是一个自定义道具';
            const price = document.getElementById('itemPrice')?.value || 100;
            const type = document.getElementById('itemType')?.value || 'CONSUMABLE';

            const code = `// 在 item_template.js 中添加
class ${id.charAt(0).toUpperCase() + id.slice(1)} extends Item {
    constructor() {
        super(
            '${id}',
            '${name}',
            '${desc}',
            ${price},
            ItemType.${type}
        );
    }

    use(character) {
        ${type === 'CONSUMABLE' ? 
            `// 实现消耗品效果
        return '使用了 ${name}';` : 
            `// 实现装备效果
        return '装备了 ${name}';`}
    }
}`;

            const codeElement = document.getElementById('itemCode');
            if (codeElement) {
                codeElement.textContent = code;
                Prism.highlightElement(codeElement);
            }
        }

        // 添加复制功能
        document.querySelectorAll('.copy-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                const code = btn.nextElementSibling.querySelector('code').textContent;
                navigator.clipboard.writeText(code).then(() => {
                    btn.textContent = '已复制!';
                    setTimeout(() => btn.textContent = '复制', 2000);
                });
            });
        });

        // 关卡生成器代码
        function generateLevelCode() {
            const depth = document.getElementById('levelDepth')?.value || 5;
            const width = document.getElementById('levelWidth')?.value || 3;
            const difficulty = document.getElementById('levelDifficulty')?.value || 'NORMAL';
            const battleRate = document.getElementById('battleRate')?.value || 0.4;
            const shopRate = document.getElementById('shopRate')?.value || 0.2;
            const eventRate = document.getElementById('eventRate')?.value || 0.2;
            const encounterRate = document.getElementById('encounterRate')?.value || 0.2;
        
            const code = `// 在 level_config.js 中添加自定义难度
const CustomDifficulty = {
    name: '自定义难度',
    depth: ${depth},
    width: ${width},
    enemyLevel: ${difficulty === 'HARD' ? 3 : difficulty === 'NORMAL' ? 2 : 1},
    rewardMultiplier: ${difficulty === 'HARD' ? 2 : difficulty === 'NORMAL' ? 1.5 : 1}
};

// 创建地图生成器
const generator = new LevelMapGenerator(CustomDifficulty);

// 设置节点分布
generator.setNodeDistribution({
    battle: ${battleRate},
    shop: ${shopRate},
    event: ${eventRate},
    encounter: ${encounterRate}
});

// 生成地图
const levelMap = generator.generateMap();`;

            const codeElement = document.getElementById('levelCode');
            if (codeElement) {
                codeElement.textContent = code;
                Prism.highlightElement(codeElement);
            }
        }
    </script>
</body>
</html> 